<template>
<view class="couponsPage">
    <u-overlay :show="couponShow">
        <view class="couponList">
            <view class="couponItem" v-for="(item, index) in couponsLists" :key="index" :class="item.couponType == '1'? 'couponType1': item.couponType == '2'? 'couponType2': 'couponType3'">
                <view class="couponName">
                    <view class="couponItemName_left flexColumnStartCenter">
                        <view>
                            <text style="font-size: 34rpx">￥</text>
                            <text style="font-size: 72rpx">{{ item.money }}</text>
                        </view>
                        <view style="font-size: 24rpx">{{ item.field1 }}</view>
                        <view style="font-size: 24rpx">{{ item.field2 }}</view>
                    </view>
                    <view class="couponItemName_right flexColumnStart">
                        <view style="font-size: 34rpx">{{ item.name }}</view>
                        <view style="font-size: 26rpx">满{{ item.field3 }}可用</view>
                        <view>
                            <view style="font-size: 24rpx">
                                <text style="margin-right: 10rpx">始</text>
                                <text>{{ item.field4 }}</text>
                            </view>
                            <view style="font-size: 24rpx">
                                <text style="margin-right: 10rpx">止</text>
                                <text>{{ item.field5 }}</text>
                            </view>
                        </view>
                    </view>
                </view>
                <view class="couponRule flexColumnStart">
                    <view>
                        <view>可用站点：</view>
                        <view>{{ item.field6 }}</view>
                    </view>
                    <view>
                        <view>可用时段：</view>
                        <view>{{ item.field7 }}</view>
                    </view>
                </view>
            </view>
        </view>
    </u-overlay>
</view>
</template>

<script>
export default {
    data() {
        return {
            couponShow: true,
            couponsLists: [{
                    couponType: "1",
                    money: 2,
                    field1: "指定站点",
                    field2: "指定时段",
                    name: "优惠券名称1",
                    field3: "20",
                    field4: "2023/10/01 00:00",
                    field5: "2023/10/31 00:00",
                    field6: "站点一、站点二、黄埔云升站、站点三、站点五、黄埔云升站、黄埔云升站",
                    field7: "10:00-15:00、16:00-24:00",
                },
                {
                    couponType: "2",
                    money: 5,
                    field1: "指定站点",
                    field2: "指定时段",
                    name: "优惠券名称2",
                    field3: "30",
                    field4: "2023/10/01 00:00",
                    field5: "2023/10/31 00:00",
                    field6: "站点一、站点二、黄埔云升站、站点三、站点五、黄埔云升站、黄埔云升站",
                    field7: "10:00-15:00、16:00-24:00",
                },
                {
                    couponType: "3",
                    money: 10,
                    field1: "指定站点",
                    field2: "指定时段",
                    name: "优惠券名称3",
                    field3: "50",
                    field4: "2023/10/01 00:00",
                    field5: "2023/10/31 00:00",
                    field6: "站点一、站点二、黄埔云升站、站点三、站点五、黄埔云升站、黄埔云升站",
                    field7: "10:00-15:00、16:00-24:00",
                },
            ],
        };
    },
};
</script>

<style lang="less" scoped>
.couponsPage {
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99;
    background-color: #fff;
}

.flexColumnStart {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}

.flexColumnStartCenter {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}

.couponList {
    width: 94%;
    margin: 20rpx auto;
    box-shadow: 4rpx 7rpx 20rpx 0rpx rgba(166, 171, 178, 0.2392);
    opacity: 1;
}

.couponItem {
    width: 100%;
    min-height: 400rpx;
    padding: 20rpx;
    box-sizing: border-box;
}

.couponType1 {
    background-image: url("../../pages/index/image/coupon2.png");
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
}

.couponType2 {
    background-image: url("../../pages/index/image/couponDefault.png");
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
}

.couponType3 {
    background-image: url("../../pages/index/image/coupon1.png");
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
}

.couponName {
    width: 100%;
    height: 60%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    padding: 20rpx 20rpx 26rpx 20rpx;
    box-sizing: border-box;
    color: #ffffff;
}

.couponItemName_left {
    width: 200rpx;
    height: 168rpx;
    border-right: 1rpx dashed #fff;
}

.couponItemName_right {
    height: 168rpx;
    padding-left: 20rpx;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
}

.couponRule {
    width: 100%;
    height: 40%;
    font-size: 24rpx;
    padding: 10rpx 40rpx;
    box-sizing: border-box;
    color: #909399;

    >view {
        width: 100%;
        display: flex;
        flex-wrap: nowrap;
        flex-direction: row;
        justify-content: flex-start;
        align-items: flex-start;

        >view:nth-of-type(1) {
            width: 120rpx;
        }

        >view:nth-of-type(2) {
            flex: 1;
            white-space: pre-wrap;
        }
    }

    >view:nth-of-type(2) {
        margin-top: 6rpx;
    }
}
</style>
